<template>
  <div id="bartend_afterSale_detail">
    <c-title :hide="false" text="售后详情"></c-title>
    <div class="statusBox" v-if="info">{{ info.status_name }}</div>
    <div class="information" v-if="info">
      <div class="txt">基本信息</div>
      <van-cell-group :border="false">
        <van-cell title="购买会员" title-class="tal" :border="false">
          <template slot="default">
            <div class="flex">
              <img :src="info.member.avatar_image" class="userImg" alt="" />
              <div class="detailBox">
                <div class="name">
                  {{ info.member.nickname }}<span>（会员id：{{ info.member.uid }}）</span>
                </div>
                <div class="mobile">{{ info.member.mobile }}</div>
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell title="售后编号" :value="info.refund_sn" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        <van-cell title="订单编号" :value="info.order.order_sn" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        <van-cell title="订单金额" :value="info.order.price" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        <van-cell title="支付方式" :value="info.order.pay_type_name" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        <van-cell title="订单状态" :value="info.order.status_name" value-class="tal_r" title-class="tal" :border="false"></van-cell>
      </van-cell-group>
    </div>
    <div class="information" v-if="info && info.refund_order_goods">
      <div class="txt">售后信息</div>
      <goodList listType="aftersales" :barrelList="info.refund_order_goods"></goodList>
    </div>
    <div class="information" v-if="info">
      <van-cell title="售后类型" :value="info.refund_type_name" value-class="tal_r" title-class="tal" :border="false"></van-cell>
      <van-cell title="收货状态" :value="info.receive_status_name" value-class="tal_r" title-class="tal" :border="false"></van-cell>
      <van-cell title="退款金额" v-if="info.refund_type != 2" value="" value-class="tal_r" title-class="tal" :border="false">
        <template slot="extra">
          <span class="extraTxt" @click="show = true" v-if="info.status <= 5">修改金额</span>
        </template>
        <template slot="default">
          <span style="padding-left: 0.65rem">¥{{ info.price }}</span>
        </template>
      </van-cell>
      <van-cell title="退款原因" :value="info.reason" value-class="tal_r" title-class="tal" :border="false"></van-cell>
      <van-cell title="说明" :value="info.remark" value-class="tal_r" title-class="tal" :border="false"></van-cell>
    </div>
    <div class="information" v-if="info">
      <div class="txt">协商记录</div>
      <div v-for="item in info.process_log" :key="item.id">
        <div class="timeRecord flex-j-sb flex-a-c">
          <div class="timeRecord_l">{{ item.operate_name }}</div>
          <div class="timeRecord_r">{{ item.created_at }}</div>
        </div>
        <template v-for="(items, index) in item.detail">
          <van-cell :value="items" v-if="items" :key="index" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        </template>
        <template v-if="item.operater_name">
          <van-cell :value="`（会员ID:${item.operator_id}）审核操作人：${item.operater_name}`" value-class="tal_r" title-class="tal" :border="false"></van-cell>
        </template>
      </div>
    </div>
    <div class="pos set-pc-style" v-if="info && info.button_models.length > 0">
      <div class="btn" v-for="item in info.button_models" @click="operation(item)" :key="item.value">{{ item.name }}</div>
    </div>
    <van-popup v-model="show" closeable round :style="{ width: '70%' }">
      <div class="orderPriceBox">
        <div class="title">修改售后金额</div>
        <van-field :border="false" v-model="orderPrice" placeholder="请输入修改金额" label="退款金额" />
        <div class="btnBox" @click="confirm">确定</div>
      </div>
    </van-popup>
    <van-popup v-model="reasonShow" closeable :close-on-click-overlay="false" round :style="{ width: '80%' }">
      <div class="orderPriceBox">
        <div class="title">驳回理由</div>
        <van-field :border="false" type="textarea" v-model="reasonTxt" placeholder="请输入驳回理由" style="padding-top: 0; background-color: #f5f5f5" />
        <div class="btnBox" @click="confirm">确定</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import goodList from "./components/goodList.vue";
export default {
  data() {
    return {
      info: null,
      show: false,
      orderPrice: "",
      reasonShow: false,
      reasonTxt: "",
      postItem: {}
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    operation(item) {
      if (item.value == 1) {
        this.reasonShow = true;
        this.postItem = item;
        return;
      } else {
        let val = "";
        if (item.value == 2) {
          val = `是否同意此订单退款？`;
        } else if (item.value == 3) {
          val = `确认此订单手动退款完成吗？`;
        }
        this.nextPost(item.api, item.name, val, item);
      }
    },
    async nextPost(api, name, val, item) {
      this.$dialog
        .confirm({
          title: name,
          message: val
        })
        .then(async () => {
          let { data, msg, result } = await $http.post(api, { refund_id: this.$route.params.refund_id }, ".");
          this.$toast(msg);
          if (result) {
            this.getData();
          }
        })
        .catch(() => {});
    },
    async confirm() {
      if (this.reasonShow) {
        let { data, msg, result } = await $http.post(
          this.postItem.api,
          {
            refund_id: this.$route.params.refund_id,
            reject_reason: this.reasonTxt
          },
          "."
        );
        if (result) {
          this.$toast(msg);
          this.reasonShow = false;
          this.getData();
        } else {
          this.$toast(msg);
        }
        return;
      }
      let { data, msg, result } = await $http.post(
        "plugin.self-bartending.api.employee.refund.change-price",
        {
          refund_id: this.$route.params.refund_id,
          change_price: this.orderPrice
        },
        "."
      );
      if (result) {
        this.$toast(msg);
        this.show = false;
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let { data, msg, result } = await $http.post(
        "plugin.self-bartending.api.employee.refund-detail.index",
        {
          refund_id: this.$route.params.refund_id
        },
        "."
      );
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    }
  },
  components: {
    goodList
  }
};
</script>
<style lang="scss" scoped>
#bartend_afterSale_detail {
  padding: 0.63rem 0.75rem 5rem 0.75rem;
  box-sizing: border-box;
  .pos {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    .btn {
      padding: 0.59rem 0.75rem;
      box-sizing: border-box;
      border-radius: 1.88rem;
      border: 0.03rem solid #aaaab3;
      margin-right: 0.63rem;
    }
    .btn:last-child {
      margin-right: 0;
    }
  }
  .tal {
    text-align: left;
    flex: 0.3;
  }
  .tal_r {
    text-align: left;
    color: #000;
  }
  .van-cell {
    padding: 1.31rem 0 0 0;
  }
  .statusBox {
    padding: 1.06rem 0.72rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 1.13rem;
    color: #f15353;
    text-align: left;
  }
  .information {
    padding: 0.9rem 0.75rem;
    box-sizing: border-box;
    margin-top: 0.63rem;
    background: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    line-height: 0.9rem;
    .timeRecord {
      padding: 0.81rem 0.63rem;
      box-sizing: border-box;
      background: #f5f5f5;
      border-radius: 0.5rem;
      margin-top: 0.91rem;
      line-height: 0.95rem;
      .timeRecord_l {
        font-weight: 500;
        font-size: 0.88rem;
      }
      .timeRecord_r {
        font-size: 0.81rem;
        color: #999999;
      }
    }
    .extraTxt {
      font-weight: 400;
      font-size: 0.81rem;
      color: #f15353;
    }
    .txt {
      font-weight: bold;
      font-size: 1rem;
      text-align: left;
    }
    .userImg {
      width: 2.5rem;
      height: 2.5rem;
      background: #737373;
      border-radius: 50%;
      margin: 0;
    }
    .detailBox {
      flex: 1;
      text-align: left;
      margin-left: 0.31rem;
      overflow: hidden;
      font-size: 0.81rem;
      color: #000;
      .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1rem;
      }
    }
  }
}
.orderPriceBox {
  width: 100%;
  background: #fff;
  padding: 0 0.75rem 0rem 0.75rem;
  box-sizing: border-box;
  .title {
    line-height: 3rem;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .btnBox {
    text-align: center;
    color: #f15353;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-indent: 2;
  }
}
</style>
